import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AntDesign } from '@expo/vector-icons';
import { Feather } from '@expo/vector-icons';
import First from './First';
import Home from './Home';
import Shop from './Shop';
import User from './User';

const Tab = createBottomTabNavigator();
const TabBar = () => (
    <Tab.Navigator
        screenOptions={{
            headerTintColor: 'red',
            tabBarActiveTintColor: 'red',
            tabBarInactiveTintColor: '#eee',
            tabBarLabelStyle: { fontSize: 14 },
            headerTitleAlign: 'center',
            tabBarStyle: { backgroundColor: '#ccc' }
        }}
    >
        <Tab.Screen
            options={{
                headerShown: false,
                title: '首页',
                tabBarIcon: ({ color, size }) => (
                    <AntDesign name='home'
                        color={color}
                        size={size}
                    />
                )
            }}
            name='First'
            component={First}
        />
        <Tab.Screen
            options={{
                title: '商品分类',
                tabBarIcon: ({ color, size }) => (
                    <Feather name="grid"
                        size={size}
                        color={color} />
                )
            }}
            name='Home'
            component={Home}
        />
        <Tab.Screen
            options={{
                title: '购物车',
                tabBarIcon: ({ color, size }) => (
                    <AntDesign name="shoppingcart"
                        size={24}
                        color={color} />
                )
            }}
            name='Shop'
            component={Shop}
        />
        <Tab.Screen
            options={{
                title: '个人中心',
                headerStyle: { backgroundColor: 'red' },
                headerTintColor: 'white',
                tabBarIcon: ({ color, size }) => (
                    <AntDesign name='user'
                        color={color}
                        size={size}
                    />
                )
            }}
            name='User'
            component={User}
        />
    </Tab.Navigator>
)

export default TabBar;